<template>
	<div class="teacher w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<p><i class="line"></i>讲师管理</p>
			<b class="rightBtn" @click="rankJs">讲师榜</b>
			<b class="rightBtn" @click="levelJs">讲师等级</b>
			<b class="rightBtn" @click="labelJs">讲师标签</b>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<a class="listOne" @click="createTeacher">新增讲师</a>
				<a class="listTwo" @click="importDaoChu">导出数据</a>
				<a class="listOne file"><input type="file" @change="importEntrance" id="articleImageFile">导入数据</a>
				<el-select v-model="type" placeholder="讲师类型" class="th_2" @change="getTableList" v-if="teacherIsOpen==1">
					<el-option label="讲师类型" value=""></el-option>
					<el-option label="内部讲师" value="1"></el-option>
					<el-option label="外部讲师" value="2"></el-option>
				</el-select> 
				<div class="msearch">
					<input placeholder="请输入讲师名字..." v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="nickname" label="讲师"></el-table-column>
				<el-table-column label="录播课程">
					<template slot-scope="scope">
						<el-button @click="handleRecorded(scope.row)">查看录播</el-button>
					</template>
				</el-table-column>
				<el-table-column label="直播课程">
					<template slot-scope="scope">
						<el-button @click="handleLive(scope.row)">查看直播</el-button>
					</template>
				</el-table-column>
				<el-table-column label="知识地图">
					<template slot-scope="scope">
						<el-button @click="handleSeenMap(scope.row)">查看课件</el-button>
					</template>
				</el-table-column>
				<el-table-column label="讲师作业">
					<template slot-scope="scope">
						<el-button @click="handleSeenHomeWork(scope.row)">查看作业</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="手机号"></el-table-column>
				<el-table-column prop="gradeRuleName" label="讲师等级" v-if="teacherIsOpen==1"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)">编辑</el-button>
						<el-button @click="handleDelete(scope.row)" class="red">删除</el-button>
					</template>
				</el-table-column> 
			</el-table>
			<div class="fenyeMargin">
				<el-button @click="toggleSelection(tableData)" class="allSelect">全选</el-button>
				<el-button @click="handleDeleteAll()" class="allDelete">批量删除</el-button>
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				teacherIsOpen:'',
				type:'',
				teacher:'',
				search: "",
				tableData: [],
				pagesize: 15,
				currentpage: 1,
				total: 1,
				multipleSelection: [],
				deleteType:'delete'
			}
		},
		methods: {
			labelJs(){
				this.$router.push({
					name:'labelJs'
				})
			},
			levelJs(){
				this.$router.push({
					name:'levelJs'
				})
			},
			rankJs(){
				this.$router.push({
					name:'rankJs'
				})
			},
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getLecturePage?"+ 'page=' + this.currentpage + '&num=' + this.pagesize +'&name='+this.search+'&rootcompanyid='+1+'&type='+this.type,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			handleRecorded(row){
				this.$router.push({
					name: 'tCourseList',
					params: {
						updateTitle:row.nickname+'的录播课程',
						speakerId: row.id,
						speakerName:row.nickname,
						nowBack:1
					}
				})
			},
			handleLive(row){
				this.$router.push({
					name: 'teacherLive',
					params: {
						updateTitle:row.nickname,
						lecturerid: row.id
					}
				})
			},
			handleSeenMap(row){
				this.$router.push({
					name: 'teacherMap',
					params: {
						updateTitle:row.nickname+'的学习地图',
						speakerId: row.id
					}
				})
			},
			handleSeenHomeWork(row){
				this.$router.push({
					name: 'teacherHomework',
					params: {
						updateTitle:row.nickname+'讲师的作业',
						speakerId: row.id
					}
				})
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				})
			},
			createTeacher() {
				this.$router.push({
					path: '/addteacher'
				})
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			handleDeleteAll() {
				this.$rootFunction().rootDeleteAll();
			},
			deleteSubmit() {
				if(this.deleteType == 'delete'){
					var s={ids:this.transitionRow.id};
					this.$ajax({
						url: this.$root.jifuUrl + "/deleteLecturerByIdNew",
						method: 'POST',
						data: this.qs.stringify(s),
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().deleteResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}else{
					var s={ids:this.multipleSelection.join(",")};
					this.$ajax({
						url: this.$root.jifuUrl + "/deleteLecturerByIdNew",
						method: 'POST',
						data: this.qs.stringify(s),
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().deleteResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			handleEdit(row) {
				this.$ajax({
					url: this.$root.jifuUrl + "/getLectureById?" + 'id=' + row.id,
					method: 'GET',
					success: res => {
						console.log(res);
						if(res.data.code == 200) {
							this.$router.push({
								name: 'addteacher',
								params: {
									type: 'edit'
								}
							})
							this.$root.teacherMsg = res.data.data;
						}
					}
				});
			},
			importEntrance(e){
				var formData = new FormData();
			    var name = $("#articleImageFile").val();
			    formData.append("file",$("#articleImageFile")[0].files[0]);
			    formData.append("file",name);
			    $.ajax({
			        url :  this.$root.jifuUrl + "/importUserInfo",
			        type : 'POST',
			        async : false,
			        data : formData,
			        processData : false,
			        contentType : false,
			        success : res => {
			        	if(res.data.code == 200) {
			        		this.$refs.alert.show({
								alertText: '导入成功',
								alertSubmit: function() {
									alertStatus: 0
								}
							})
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();	
						}
			        }
			    })
			},
			importDaoChu(){}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
			this.getTableList();
			this.$rootFunction().getTeacherLevelStatus();
			this.teacher = this.$root.huasan.teacher;
		}
	}
</script>

<style>
	.teacher .el-tabs-report a.listTwo {margin-left:0;}
	.file{background:#fff!important;height:33px;line-height:33px;width:60px!important;display:inline-block;color:#44cef6!important;text-align:center;border-radius:5px;cursor:pointer;outline:none;border:none;position:relative;*display:inline;cursor:pointer;margin-left: 10px;}
	.file input{height:33px;line-height:33px;width:60px;position:absolute;font-size:100px;right:0;top:0;opacity:0;
	filter:alpha(opacity=0);cursor:pointer;overflow: hidden;}
</style>